<template>
    <div class="table">
        <div class="left">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
                <div class="name">{{$t('m.label.customerName')}}</div>
                <el-form-item prop="personNames">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 10, maxRows: 15}"
                        :placeholder="$t('m.placeholder.pleaseEnterUserDisplayName')"
                        v-model="ruleForm.personNames"
                    ></el-input>
                </el-form-item>
                <el-button
                    type="primary"
                    @click="searchfor"
                    icon="el-icon-search"
                >{{$t('m.button.search')}}</el-button>
                <el-button
                    @click="ruleForm.personNames = ''"
                    icon="el-icon-circle-close"
                >{{$t('m.button.reset')}}</el-button>
            </el-form>
        </div>
        <div class="right">
            <pagination :length="tableData.length" :pagination="pagination" float="right"></pagination>
            <el-table
                :data="tableData.slice((pagination.currpage - 1) * pagination.pagesize, pagination.currpage * pagination.pagesize)"
                border
                :header-cell-style="getRowClass"
                v-loading="loading"
                style="width: 100%;"
            >
                <el-table-column prop="personName" :label="$t('m.label.customerName')"></el-table-column>
                <el-table-column prop="seller" :label="$t('m.label.account')"></el-table-column>
                <el-table-column prop="countryCode" :label="$t('m.label.country')"></el-table-column>
                <el-table-column prop="productSku" :label="$t('m.label.productModelNumber')">
                    <template slot-scope="scope">
                        <el-link
                            :href="'#/productCenter/productBasicInfo?model='+ scope.row.productSku"
                        >{{scope.row.productSku}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="asin" :label="$t('m.label.ASIN')">
                    <template slot-scope="scope">
                        <el-link
                            :href="'#/productCenter/productBasicInfo?asin='+ scope.row.asin"
                        >{{scope.row.asin}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('m.label.orderNumber')">
                    <template slot-scope="scope">
                        <el-popover
                            trigger="click"
                            placement="top-start"
                            @show="triggerDetailst(scope.row)"
                        >
                            <div v-loading="dateilsloading" class="orderIdDetailst-warp">
                                <p class="title">{{$t('m.label.orderDetails')}}</p>
                                <p>{{$t('m.label.account')}}：{{ orderIdDetailst.brandName }}</p>
                                <p>{{$t('m.label.country')}}：{{ orderIdDetailst.countryName }}</p>
                                <p>{{$t('m.label.orderNumber')}}：{{ orderIdDetailst.orderId }}</p>
                                <p>{{$t('m.label.dateOfPurchase')}}：{{ orderIdDetailst.cnFormatOrderDate}}</p>
                                <p>{{$t('m.label.buyerName')}}：{{ orderIdDetailst.personName }}</p>
                                <p class="title">{{$t('m.label.orderProduct')}}</p>
                                <p v-for="(item,index) in orderIdDetailst.orderItems" :key="index">
                                    <span>{{$t('m.label.SKU')}}：{{item.productModelNumber}}</span>
                                    <span>{{$t('m.label.ASIN')}}：{{item.asin}}</span>
                                    <span>quantity：{{item.quantity}}</span>
                                    <span>Price：{{item.unitPriceStr}}</span>
                                </p>
                                <p>
                                    <span>{{$t('m.label.totalOrderPrice')}}：{{orderIdDetailst.subtotalStr}}</span>
                                    <span>{{$t('m.button.reimburse')}}：{{orderIdDetailst.returnTotal}}</span>
                                </p>
                                <p class="title">{{$t('m.label.address')}}：</p>
                                <p>
                                    {{orderIdDetailst.orderIdDetailst}}
                                    <br v-if="orderIdDetailst.orderIdDetailst" />
                                    {{orderIdDetailst.city}}
                                    <br v-if="orderIdDetailst.city" />
                                    {{orderIdDetailst.StateOrRegion}}{{orderIdDetailst.postalCod}}
                                    <br
                                        v-if="orderIdDetailst.StateOrRegion || orderIdDetailst.postalCod"
                                    />
                                    {{orderIdDetailst.countryCode}}
                                </p>
                            </div>
                            <div slot="reference" class="triggerDetailst">
                                <i class="el-icon-arrow-right"></i>
                                {{ scope.row.amzOrderId }}
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="orderDate" :label="$t('m.label.orderDate')"></el-table-column>
            </el-table>
            <pagination :length="tableData.length" :pagination="pagination" float="right"></pagination>
        </div>
    </div>
</template> 
<script>
import pagination from "components/pagination/pagination.vue";
const ERR_OK = 200;
export default {
    data() {
        return {
            ruleForm: {
                personNames: ""
            },
            loading: false,
            dateilsloading: false,
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            tableData: [],
            rules: {
                personNames: [
                    {
                        required: true,
                        message: "请输入客户姓名",
                        trigger: "blur"
                    }
                ]
            },
            orderIdDetailst: {}
        };
    },
    methods: {
        searchfor() {
            var personNames = this.ruleForm.personNames.split(/[(\r\n)\r\n]+/);
            for (let i in personNames) {
                personNames[i] = this.Trim(personNames[i]);
            }
            personNames = personNames.filter(item => item.trim());
            this.$emit("searchfor");
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    this.tableData = [];
                    this.loading = true;
                    this.$ajax({
                        method: "post",
                        url:
                            this.GLOBAL.orderAndOverseaService +
                            "/orderMsg/getOrderByParam",
                        data: {
                            asinIds: this.$parent.formData.asinIds.join(),
                            countryIds: this.$parent.formData.countryIds.join(),
                            personNames: personNames.join(),
                            productIds: this.$parent.formData.productIds.join()
                        }
                    }).then(res => {
                        if (res.data.code === ERR_OK) {
                            this.tableData = res.data.data;
                        }
                        this.loading = false;
                    });
                } else {
                    return false;
                }
            });
        },
        Trim(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        },
        triggerDetailst(item) {
            this.dateilsloading = true;
            this.orderIdDetailst = {};
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.orderAndOverseaService +
                    "/orderMsg/getOrderMsg",
                data: {
                    amzOrderIds: item.amzOrderId,
                    sellerId: item.sellerId
                }
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.dateilsloading = false;
                    this.orderIdDetailst = res.data.data[0];
                }
            });
        }
    },
    components: {
        pagination
    }
};
</script>
<style lang="stylus">
.table {
    .left {
        .el-textarea {
            .el-textarea__inner {
                border-radius: 0;
                resize: none;
            }
        }
    }
}
</style>

<style lang="stylus" scoped>
.table {
    min-height: 400px;

    .left {
        float: left;
        width: 200px;

        .name {
            font-size: 16px;
            color: #333;
        }

        .el-textarea {
            margin: 10px 0;

            .el-textarea__inner {
                border-radius: 0;
            }
        }

        .el-button {
            width: 92px;
        }
    }

    .right {
        padding: 35px 0 0 220px;
    }

    .triggerDetailst {
        cursor: pointer;

        &:hover {
            color: #409eff;
        }
    }
}

.orderIdDetailst-warp {
    max-width: 300px;
}

.el-popover {
    p {
        padding: 3px 0;

        span {
            margin-right: 10px;
            display: inline-block;
        }
    }

    p.title {
        padding: 10px 0;
        color: #333;
        font-weight: bold;
    }
}
</style>

